<template>
  <div id="app">
    <div class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <span class="navbar-brand">SMS</span>
      <span class="navbar-text">欢迎使用</span>
      <div class="ml-auto">
        <span class="navbar-text">欢迎登陆【admin】</span>
        <a href="#" class="navbar-text">退出</a>
      </div>
    </div>

    <div class="container-fluid pt-5 vh-100">
      <div class="row vh-100">
        <div class="col-3 p-0 h-100">
          <card title="内容管理" class="p-0 h-100 rounded-0" header-class="bg-white">
            <ul class="list-group list-group-flush">
              <li class="list-group-item" v-for="(nav,index) in navs" :key="index">
                <router-link :to="nav.path">{{nav.title}}</router-link>
              </li>
            </ul>
          </card>
        </div>
        <div class="col-9 p-0">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Card from "@/components/Card"
export default {
  name: "Home",
  components: { Card },
  data: function() {
    return {
      navs: [
        { path: "/article/list", title: "文章列表" },
        { path: "/article/edit", title: "新增文章" }
      ],
      categories:[
            {title:'默认',value:0},
            {title:'栏目一',value:1},
            {title:'栏目二',value:2},
            {title:'栏目三',value:3}
      ],
      articles:[
            {title:'标题一',category:1,hot:true},
            {title:'标题二',category:2,hot:true},
            {title:'标题三',category:3,hot:false}
      ]
    };
  }
};
</script>
